<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:c="http://java.sun.com/jstl/core"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:rich="http://richfaces.org/rich"
              xmlns:a4j="http://richfaces.org/a4j"
              xmlns:core="http://www.contact.core.com/contacts/core/ui"
        >

    <!--@elvariable id="showTopic" type="java.lang.Boolean"-->
    <!--@elvariable id="showReceivers" type="java.lang.Boolean"-->
    <!--@elvariable id="width" type="java.lang.String"-->
    <!--@elvariable id="height" type="java.lang.String"-->

    <h:panelGrid columns="2" width="100%">
        <c:if test="#{not (showReceivers eq null) and (showReceivers eq true)}">


            <h:outputText value="#{resources.composeToLabel}" style="width:auto;"/>

            <h:panelGroup>
                <h:inputTextarea value="#{createMessageBean.receivers}" id="addrInput" rows="1" style="width:100%"/>

                <rich:suggestionbox height="200" width="400"
                                    usingSuggestObjects="true"
                                    nothingLabel="No entry found"
                                    suggestionAction="#{mailSessionBean.autocomplete}" var="user"
                                    for="addrInput" fetchValue="#{user.info.mailId}" id="suggestion" tokens=",; ">
                    <h:column>
                        <core:pictureForView pictureKey="photoprofile_#{user.info.id}"
                                             style="width:30px;height:30px;"
                                             informationId="#{user.info.id}"
                        />
                    </h:column>
                    <h:column>
                        <h:outputText value="#{user.info.firstName} #{user.info.lastName} "/>
                    </h:column>
                    <h:column>
                        <h:outputText value="&#60;#{user.info.mailId}&#62;"/>
                    </h:column>
                </rich:suggestionbox>
            </h:panelGroup>
        </c:if>
        <c:if test="#{not (showTopic eq null) and (showTopic eq true)}">

            <h:outputText value="#{resources.composeTopicLabel}" style="width:auto;"/>
            <h:inputText value="#{createMessageBean.topic}" style="width:100%;"/>

        </c:if>
    </h:panelGrid>

    <h:panelGroup layout="block" style="min-width:100%;min-height:100px">
        <rich:editor theme="advanced" viewMode="visual" plugins="paste,emotions" tabindex=":prev,:next"
                     value="#{createMessageBean.body}">
            <f:param name="theme_advanced_buttons1"
                     value="bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect"/>
            <f:param name="theme_advanced_buttons2"
                     value="bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,image,|,forecolor,backcolor,|,sub,sup,|,charmap,emotions,|,hr,removeformat"/>
            <f:param name="theme_advanced_buttons3" value=""/>
            <f:param name="theme_advanced_toolbar_location" value="top"/>
            <f:param name="theme_advanced_toolbar_align" value="left"/>
            <f:param name="width" value="100%"/>
            <f:param name="height" value="150"/>
        </rich:editor>
    </h:panelGroup>

</ui:component>